{% load i18n static %}

<link rel="stylesheet" type="text/css" href="{% static 'node/datatables.net-bs5/css/dataTables.bootstrap5.css' %}">
<script src="{% static 'node/datatables.net/js/dataTables.js' %}" ></script>
<script src="{% static 'node/datatables.net-bs5/js/dataTables.bootstrap5.js' %}" ></script>
<script>
    $(document).ready(function () {
        $('#main_member_list').DataTable({
            paging: false,
            bFilter: true,
            bInfo: false,
            dom: '<"datatable-header d-flex justify-content-between align-items-center"f>t<"datatable-footer"ip>', // Layout of elements
            initComplete: function () {
                const title = $('<div class="datatable-title"><h4>Members</h4></div>');
                $(".datatable-header").prepend(title);
            }
        });
    });
</script>



<table class="table table-hover table-responsive" id="main_member_list">
<thead>
<tr>
    {% for key in user_table.keys %}
        <th>{{ key }}</th>
    {% endfor %}
</tr>
</thead>
<tbody>
{% for current_user in user_table.users %}
<tr>
    <td>
        {{current_user.obj.pk}}
    </td>
    <td>
        <a href="{% url 'core:user:overview' current_user.obj.pk %}">{{current_user.obj}}</a>
    </td>
    <td>
        {{current_user.obj.get_full_name}}
    </td>
    <td data-order="{{current_user.last_log|date:'U'}}">
        {{current_user.last_log|default:'-/-'}}
    </td>
    {% if show_gym %}
    <td>
        {% if current_user.obj.userprofile.gym_id %}
            <a href="{{ current_user.obj.userprofile.gym.get_absolute_url }}">
            {{ current_user.obj.userprofile.gym }}
            </a>
        {% else %}
            -/-
        {% endif %}
    </td>
    {% endif %}
</tr>
{% endfor %}
</tbody>
</table>
